<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>处理过程填写页</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/oksub.css">
</head>

<style>
    .handler {
        color: #a59191;
        font-size: 12px;
    }

    .tdAdapt {
        font-size: 16.0pt;
        word-wrap: break-word;
        word-break: break-all;
    }
    .tub{
        font-size: 16px;
        margin-right: 5px;
    }
</style>

<body>
<div class="ok-body" style="background: #F8F8F8">
    <div class="layui-row ">
        <div class="layui-col-md9" style="background-color:#f8f8f8;">
            <div class="layui-row">
                <hr class="layui-bg-gray">
                <fieldset class="layui-elem-field">
                    <legend>警情详情<span class="layui-badge layui-bg-blue">处理中</span></legend>
                    <div class="layui-field-box " style="margin-left: 20px;">
                        <div class="layui-row">
                            <div class="layui-col-md9">
                                <div class="divarea">
                                    <i class="tub layui-icon layui-icon-username" style="color: #1E9FFF;"></i>
                                    <sapn class="textarea">处理者 : <span id="policeName">加载中</span></sapn>
                                </div>
                                <div class="divarea">
                                    <i class="tub layui-icon layui-icon-home" style="color: #FF5722;"></i>
                                    <sapn class="textarea">处理单位 : <span id="departmentName">加载中</span></sapn>
                                </div>
                                <div class="divarea">
                                    <i class="tub layui-icon layui-icon-log" style="color: #FFB800;"></i>
                                    <sapn class="textarea">分派时间 : <span id="askForTime">加载中</span></sapn>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="layui-bg-gray">
                    <div>
                        <div style="background: #d2d2d2">
                            <div style="width: 80%;height: 100%;margin: 0 auto;">
                                <div class="layui-collapse" lay-filter="caseData">
                                    <div class="layui-colla-item">
                                        <h2 class="layui-colla-title" style="font-size: 16px" ><span id="caseDataChange">隐藏</span>警情信息</h2>
                                        <div class="layui-colla-content layui-show" style="background-color:#fdfdfd;">
                                            <div style="background-color:#fdfdfd;">
                                                <iframe scrolling="no" frameborder="0" src="../caseCommonData/caseData.html" width="100%"
                                                        height="700px" id="caseData"
                                                        onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>700?fdh:700);"></iframe>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div style="background-color:#fdfdfd;margin-top: 10px;padding-top: 20px;">
                                    <iframe scrolling="no" frameborder="0" src="../caseCommonData/processData.html" width="100%"
                                            height="700px" id="processData"
                                            onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>700?fdh:700)"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="layui-col-md3" style="background-color:#f8f8f8;">
            <div class="layui-row">
                <hr class="layui-bg-gray"/>
                <fieldset class="layui-elem-field">
                    <legend>分派信息</legend>
                    <div style="background-color: #f8f8f8;height: auto;margin:15px 20px 0 30px">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <i class="tub layui-icon layui-icon-username" style="color: #1E9FFF;"></i>
                                <label>分派者 : </label>
                                <span id="askPoliceName">加载中</span>
                            </div>
                            <div class="layui-form-item">
                                <i class="tub layui-icon layui-icon-home" style="color: #FF5722;"></i>
                                <label>分派单位 : </label>
                                <span id="askDepartmentName">加载中</span>
                            </div>
                            <div class="layui-form-item">
                                <i class="tub layui-icon layui-icon-log" style="color: #FFB800;"></i>
                                <label>分派时间 : </label>
                                <span id="askTime">加载中</span>
                            </div>
                            <div class="layui-form-item">
                                <i class="tub layui-icon layui-icon-read" style="color: #009688;"></i>
                                <label>警情描述 : </label>
                                <span id="caseDescription">加载中</span>
                            </div>
                            <div class="layui-form-item">
                                <i class="tub layui-icon layui-icon-diamond" style="color: #ff1e31;"></i>
                                <label>督办级别 : </label>
                                <span id="procLevel">加载中</span>
                            </div>
                        </form>
                    </div>
                </fieldset>
                <fieldset class="layui-elem-field">
                    <legend>办理情况</legend>
<!--                    <div class="layui-form" action="">-->

                        <div style="background-color: #f8f8f8;height: auto;margin:15px 20px 0 30px">
                            <form class="layui-form" action="">
                                <div class="layui-form-item">
                                    <div class="layui-input-block" style="margin-left: 0px">
                                        <input type="radio" lay-filter="start" name="start" value="0" title="正在办理中" checked="">
                                        <input type="radio" lay-filter="start"  name="start" value="1" title="该起警情已办结">
                                    </div>
                                </div>
                                <div>
                                    <textarea name="" required lay-verify="required" id="procRemark" placeholder="此处填写办理情况"
                                              class="layui-textarea"></textarea>
                                </div>
                                <hr>
                                <button type="button" class="layui-btn layui-btn-normal" id="showFile">查看已上传文件</button>
                                <div class="layui-upload">
                                    <div class="layui-upload-list">
                                        <table class="layui-table">
                                            <thead>
                                            <tr>
                                                <th>文件名</th>
                                                <th>大小</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody id="demoList"></tbody>
                                        </table>
                                    </div>
                                </div>
                                <div>
                                    <hr>
                                    <button type="button" class="layui-btn layui-btn-normal" id="testList">添加附件</button>
                                    <button type="button" style="margin-left: 10px;display: none" class="layui-btn" id="uploadListAction">上传附件</button>
                                    <button type="button" style="margin-left: 10px" class="layui-btn" id="applyEnd">保存记录</button>
                                </div>
                            </form>
                        </div>
<!--                    </div>-->
                </fieldset>
            </div>
        </div>
    </div>
</div>
<br/>
</body>

<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script>
    let processDataHeight=0
    var caseId=GetQueryString("caseid");
    var processId=GetQueryString("processid");
    //警情详细页
    getCaseData(caseId)
    function getCaseData(caseId){
        $("#caseData").on("load", function () {
            var data={caseId:caseId}
            this.contentWindow.getParentData(data)
        })
    }
    //处理过程页
    getprocessData(processId)
    function getprocessData(processId){
        $("#processData").on("load", function () {
            var data={processId:processId}
            this.contentWindow.getParentData(data)
        })
    }

    //分派信息绑定
    $.ajax({
        url: mainUri+"/VCaseProcInfoByPolice/getCaseProcInfoByPolice",
        data: {processId:processId,policeId:police.policeId,procTatus:0},
        type: "Post",
        dataType: "json",
        success: function (data) {
            var newUrgingData=data.data[data.data.length-1]
            $("#policeName").html(newUrgingData.nfullName);
            $("#departmentName").html(newUrgingData.nextDepartmentName);
            $("#askForTime").html(newUrgingData.askForTime);
            $("#askPoliceName").html(newUrgingData.askFullName);
            $("#askDepartmentName").html(newUrgingData.askForDepartmentName);
            $("#askTime").html(newUrgingData.askForTime);
            $("#caseDescription").html(newUrgingData.caseDescription);
            $("#procLevel").html(newUrgingData.procLevel);
        },
        error: function () {
            console.log("数据加载失败")
        }
    });
    //详细警情页显示隐藏
    layui.use(['element', 'upload', 'form', 'layer','okLayer'], function () {
        var fileLength = 0;//当前文件传输列表里面为传输的文件
        var upload = layui.upload;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        let okLayer = layui.okLayer;
        var uploadType = '0';//提交方式(与单选按钮的value相同)
        var element = layui.element;
        element.on('collapse(caseData)', function (data) {
            if (processDataHeight == 0) {
                processDataHeight = $("#processData").height();
            }
            if (!data.show) {
                if (processDataHeight < 800) {
                    $("#processData").height(800)
                }
                $("#caseDataChange").html("显示")
            } else {
                $("#processData").height(processDataHeight)
                $("#caseDataChange").html("隐藏")
            }
        });

        //根据单选框修改按钮值
        form.on("radio(start)", function (data) {
            var num = data.value;
            if (num == 1) {
                $("#applyEnd").text("申请办结");
            } else {
                $("#applyEnd").text("保存记录");
            }
        });

        //多文件列表示例
        var demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#testList'
            , url: mainUri + '/resources/fileUpload' //改成您自己的上传接口
            , accept: 'file'
            , multiple: true
            , auto: false
            , bindAction: '#uploadListAction'
            ,//上传前的回调
            before: function () {
                this.data = {
                    processId: processId
                }
            }
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                $("#uploadListAction").show();
                fileLength = Object.keys(this.files).length;
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        fileLength = Object.keys(files).length;
                        if (fileLength == 0) {
                            $("#uploadListAction").hide();
                        }
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                if (res.code == 0) { //上传成功
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    delete this.files[index]; //删除文件队列已经上传成功的文件
                    fileLength = Object.keys(this.files).length;
                    if (fileLength == 0) {
                        $("#uploadListAction").hide();
                        layer.msg('附件上传成功', {
                            icon: 1,
                            time: 1000
                        }, function () {

                        });
                    }
                    return
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });


        $("#showFile").on('click', showFile)

        function showFile() {
            okLayer.open("文件查看", "../caseCommonData/fileDataByPoliceOfficer.html?processId=" + processId, "35%", "50%", function (layero) {
                let iframeWin = window[layero.find("iframe")[0]["name"]];
            }, function () {

            })
        }
        //申请办结
        function addOperationByFile() {
            $.ajax({
                url: mainUri + "/caseOperNote/insertAndFile",
                data: {
                    processId: processId,
                    procRemark: $("#procRemark").val(),
                    start: $('input[name="start"]:checked').val()
                },
                type: "Post",
                dataType: "json",
                success: function (data) {
                    showloading(false)
                    if (data.code ==0) {
                        layer.msg('操作成功', {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            window.parent.opener.location.reload();
                            window.close();
                        });
                    } else {
                        if(data.code == -500){
                            layer.msg(data.msg, {
                                icon: 1,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                window.location = mainUri+"/login.html";
                            });

                        }else{
                            layer.alert(data.msg);
                        }
                    }
                },
                error: function () {
                    showloading(false)
                    layer.alert('操作失败,请重试');
                }
            });
        }
         //弹窗
        $("#applyEnd").on('click', function () {
            var procRemark = $("#procRemark").val();
            if (procRemark.trim() == "") {
                layer.alert("<span style='color: red'>办理情况</span>为空")
                return
            }
            var upl = $("#demoList tr")
            if (upl.length == 0) {
                layer.confirm('确定提交？', {
                    btn: ['确定', '取消']//按钮
                    , title: ''
                }, function (index) {
                    layer.close(index);
                    //此处请求后台程序，下方是成功后的前台处理……
                    showloading(true)
                    addOperationByFile()
                });
                return;
            } else {
                if (fileLength != 0) {
                    layer.alert("有附件还未成功提交,请先提交成功后再进行操作")
                    return
                } else {
                    layer.confirm('确定提交？', {
                        btn: ['确定', '取消']//按钮
                        , title: ''
                    }, function (index) {
                        showloading(true)
                        addOperationByFile();
                    });

                }
            }

        })
    });

    function caseReturnData(returnData) {

    }

    function processReturnData(returnData) {
        $("#processData").height(returnData.height)
        processDataHeight=returnData.height
    }
    //文档下载窗口
    function showProcessContent(clickId) {
        layui.use(['element','layer','okLayer'], function () {
            let okLayer = layui.okLayer;
            okLayer.open("查询条件", "../caseCommonData/fileData.html?processId=" + clickId, "35%", "50%", function (layero) {
                let iframeWin = window[layero.find("iframe")[0]["name"]];
            }, function () {

            })
        })
    }


</script>

</html>